<template>
	<view class="conter">
		<uni-nav-bar :fixed="true" shadow :background-color="navClor" status-bar title="中医数字" :border="false"
			:shadow="false" />
		<image class="banner" src="../../static/huiyanbanner.png" mode="">
		</image>
		<view class="jiage">
			<view class="tabTitle">
				<view v-for="item in tabList" :key="item.id" @click="tabChangeClick(item.id)"
					:class="[tabChange === item.id ? 'tabChange' : 'tabItem']" v-text="item.txt"></view>
			</view>
			<scroll-view class="scroll-view_H priceList" scroll-x="true" scroll-left="120">
				<view v-for="item in priceList" :key="item.id" class="scroll-view-item_H  priceItem">
					<view class="priceItem_title" v-text="item.name">

					</view>
					<view class="priceItem_price" v-text="item.price">

					</view>
					<view class="priceItem_ild_price" v-text="item.oldprice">

					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bom">
			<view class="bom_box">
				<view class="bom_box_title">
					开通数字分身形式
				</view>
				<view class="bom_image">
					<image src="../../static/huiyuanBom.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {

			return {
				tabList: [{
					id: 1,
					txt: '单月会员VIP'
				}, {
					id: 2,
					txt: '年度会员VIP'
				}],
				tabChange: 1,
				priceList: [{
					id: 0,
					name: '基础版-初级',
					price: 120,
					oldprice: 120
				}, {
					id: 1,
					name: '基础版-入门',
					price: 240,
					oldprice: 240
				}, {
					id: 3,
					name: '基础版-高级',
					price: 360,
					oldprice: 360
				}, {
					id: 4,
					name: '基础版-高级',
					price: 360,
					oldprice: 360
				}],
				navClor: "rgba(255, 255, 255, 0)"

			}
		},
		methods: {
			tabChangeClick(id) {
				this.tabChange = id
			}
		},
		onPageScroll: function(e) {
			if (e.scrollTop > 1) {
				this.navClor = 'rgba(255, 255, 255, 1)'
			}else{
				this.navClor = 'rgba(255, 255, 255, 0)'
			}
		}
	}
</script>

<style lang="scss">
	.conter {
		width: 100vw;
		height: 100vh;
		position: relative;

		.uni-navbar__placeholder {
			display: none
		}

		.banner {
			height: 473rpx;
			width: 100%;

		}

		.jiage {
			background-color: #fff;
			height: 380rpx;
			margin-top: -55rpx;

			.tabTitle {
				padding-top: 40rpx;
				height: 80rpx;
				width: 100%;
				display: flex;
				align-items: center;
				gap: 165rpx;
				justify-content: center;

				.tabItem {
					height: 60rpx;
					font-family: AlibabaPuHuiTiM;
					font-weight: 400;
					font-size: 38rpx;
					color: #919191;
				}

				.tabChange {
					height: 60rpx;
					font-family: AlibabaPuHuiTiB;
					font-weight: 400;
					font-size: 38rpx;
					color: #00C9D4;

					// font-weight: bold;
					&::after {
						content: " ";
						display: block;
						width: 100rpx;
						height: 6rpx;
						border-radius: 8rpx;
						overflow: hidden;
						margin: 10rpx auto 0;
						background: #00C9D4;
					}
				}
			}

			.priceList {
				display: flex;
				height: 260rpx;
				width: 700rpx;
				padding-left: 50rpx;
				display: flex;

				.priceItem {
					margin-right: 20rpx;
					width: 260rpx;
					height: 190rpx;
					border: 2.08rpx solid #14CED6;
					border-radius: 29.17rpx;

				}
			}

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
			}

			.scroll-view-item {
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				font-size: 36rpx;
			}

			.scroll-view-item_H {
				display: inline-block;
				width: 100%;
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				font-size: 36rpx;

				.priceItem_title {
					height: 40%;
					line-height: 100rpx;
					font-family: AlibabaPuHuiTiB;
					font-weight: 400;
					font-size: 34rpx;
					color: #101011;
				}

				.priceItem_price {
					height: 30%;
					line-height: 60rpx;
					font-family: AlibabaPuHuiTiB;
					font-weight: 400;
					font-size: 35rpx;
					color: #FF335D;
				}

				.priceItem_ild_price {
					font-family: AlibabaPuHuiTiM;
					font-weight: 400;
					font-size: 28rpx;
					color: #A3A7AA;
					text-decoration-line: line-through;
					line-height: 40rpx;
				}
			}
		}

		.bom {
			height: 570rpx;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 40rpx;
			box-sizing: border-box;

			.bom_box {
				width: 100%;
				height: 100%;
				background-image: linear-gradient(to bottom right, #68E0CF, #00B3E7);
				border-radius: 28.13rpx;

				.bom_box_title {
					font-family: AlibabaPuHuiTiB;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					font-size: 41.83rpx;
					color: #FFFFFF;
				}

				.bom_image {
					height: calc(100% - 110rpx);
					padding:  0 30rpx 30rpx;
					>image {
						height: 100%;
						width: 100%;
					}
				}

			}
		}
	}
</style>